<template>
  <div class="time_deposit_page">
    <van-tabs v-model="active" offset-top="46" sticky swipeable>
      <van-tab class="transferIn" title="活期转定期" name="01">

        <div class="">
          <div class="payment_account_box">
            <van-cell is-link :value="form.account" title="付款账号" @click="openModal" />
            <van-cell title="" class="balance">
              <template #default>
                <span class="currency">人民币</span> 余额：{{23677456.3333|currency('')}}元
              </template>
            </van-cell>
          </div>

          <div class="transfer_payee_box">
            <van-cell title="转账金额">
              <template #label>
                <div class="amount_box">
                  <span class="currency">¥</span>
                  <van-field class="amount_input" v-model="form.amount" placeholder="请输入金额" />
                </div>
              </template>
            </van-cell>
            <van-field label="大写金额" input-align="right">
              <template #input><span>{{form.amount | currency}}</span></template>
            </van-field>
          </div>
          <!--<div class="account_info">-->
          <!--<van-cell is-link title="币种" :value="form.currency"-->
          <!--@click="selectItem('currency')" />-->
          <!--<van-cell title="可用余额" :value="form.balance" />-->
          <!--</div>-->
          <!--<div class="amount">-->
          <!--<div class="title">转存金额</div>-->
          <!--<div class="input_box">-->
          <!--<div class="input_account" @click="showKeyboard = true">-->
          <!--<span>{{amount | currency}}</span>-->
          <!--</div>-->
          <!--<div>{{amount | convertToChinaNum}}</div>-->
          <!--</div>-->
          <!--</div>-->
          <div class="financial">
            <van-cell is-link title="存期" :value="form.time"
                      @click="selectItem('deadline')" />
            <van-cell title="利率" :value="form.rate" />
            <van-cell is-link title="到期自动转存" :value="form.automatic"
                      @click="selectItem('automatic')" />
            <van-field label="备注" placeholder="请输入备注" rows="1" type="textarea"
                       autosize v-model="form.remark" />

          </div>
          <div class="next">
            <van-button round type="info" @click="next" block>提交</van-button>
          </div>
          <div class="tips_box">
            <div class="tips">温馨提示</div>
            <div class="tips_detail">
              <p>1.单位人民币定期存款的最低起存金额为人民币一万元（含），多存不限。</p>
              <p>2.单位美元定期存款的最低起存金额为美元5万元（含），多存不限。</p>
              <p>3.成功开立的定期存款可在【定期存款】-【定期转活期】下查询。</p>
              <p>4.手机银行开立的定期存款不能在营业网点办理支取，但可以到营业网点补打实物存单，
                补打实物存单后，改定期存款即转为柜面开立的定期存款，在手机银行只能进行查询，不能支取。</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="定期转活期" class="transferOut" name="02">
        <van-dropdown-menu class="dropdown_box">
          <van-dropdown-item title="014579729112010007" :options="accountList" />
          <van-dropdown-item :title="currentTime" ref="item">
            <van-datetime-picker
              v-model="currentDate"
              type="year-month"
              title="选择年月"
              :max-date="maxDate"
              :formatter="formatter"
              @confirm="checkDate"
              @cancel="cancelDate"
            />
          </van-dropdown-item>
        </van-dropdown-menu>
        <div class="deposit_list">
          <div class="deposit_item">
            <div class="item_title">
              <div class="money">￥20,000.80</div>
              <div class="status"><span>账号状态：</span>正常</div>
            </div>
            <div class="item_content">
              <p><label>定期账号：</label>101220001039496543</p>
              <p><label>开户日期：</label>2019-06-27</p>
              <p><label>开户渠道：</label>网上银行</p>
              <p><label>利率：</label>1.276%</p>
              <p><label>存期：</label>3个月</p>
              <p><label>币种：</label>人民币</p>
              <p><label>到期日：</label>2020-09-26
                <van-button round type="info" size="mini"
                            class="transfer" color="#FFA500" @click="transferOut">转活期</van-button>
              </p>
            </div>
          </div>
          <div class="deposit_item">
            <div class="item_title">
              <div class="money">￥20,000.80</div>
              <div class="status"><span>账号状态：</span>正常</div>
            </div>
            <div class="item_content">
              <p><label>定期账号：</label>101220001039496543</p>
              <p><label>开户日期：</label>2019-06-27</p>
              <p><label>开户渠道：</label>网上银行</p>
              <p><label>利率：</label>1.276%</p>
              <p><label>存期：</label>3个月</p>
              <p><label>币种：</label>人民币</p>
              <p><label>到期日：</label>2020-09-26
                <van-button round type="info" size="mini"
                            class="transfer" color="#FFA500" @click="transferOut">转活期</van-button>
              </p>
            </div>
          </div>
          <div class="deposit_item">
            <div class="item_title">
              <div class="money">￥20,000.80</div>
              <div class="status"><span>账号状态：</span>正常</div>
            </div>
            <div class="item_content">
              <p><label>定期账号：</label>101220001039496543</p>
              <p><label>开户日期：</label>2019-06-27</p>
              <p><label>开户渠道：</label>网上银行</p>
              <p><label>利率：</label>1.276%</p>
              <p><label>存期：</label>3个月</p>
              <p><label>币种：</label>人民币</p>
              <p><label>到期日：</label>2020-09-26
                <van-button round type="info" size="mini"
                            class="transfer" color="#FFA500" @click="transferOut">转活期</van-button>
              </p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    <van-popup v-model="showPayee" position="right"
               :style="{ width: '55%', height: '100%' }">
      <van-cell v-for="(item, index) in accountList" :key="index" center is-link
                :title="item.name" :label="item.account"
                @click="checkPayee(item)" />
    </van-popup>
    <van-number-keyboard
      theme="custom"
      extra-key="."
      :show="showKeyboard"
      :maxlength="20"
      close-button-text="完成"
      @show="onKeyboardShow"
      @input="onKeyboardInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
    />
  </div>
</template>
<script>
import {
  Tab,
  Tabs,
  NavBar,
  NumberKeyboard,
  DropdownMenu,
  DropdownItem,
  DatetimePicker
} from 'vant';

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [NavBar.name]: NavBar,
    [NumberKeyboard.name]: NumberKeyboard,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [DatetimePicker.name]: DatetimePicker
  },
  data() {
    return {
      active: '01',
      checkItem: '',
      show: false,
      actions: [],
      showPayee: false,
      showKeyboard: false,
      form: {
        currency: '01',
        account: '',
        time: '',
        balance: 0,
        rate: ''
      },
      maxDate: new Date(),
      currentTime: '起始日期',
      currentDate: new Date(),
      amount: '0.00',
      currencyItems: [{ name: '人民币', val: '01' }, { name: '美元', val: '02' }],
      timeLimits: [
        { name: '三个月', value: '01', rate: '1.27%' },
        { name: '一年', value: '02', rate: '1.77%' },
        { name: '一年', value: '03', rate: '2.27%' }
      ],
      automaticItems: [
        { name: '是', val: '01' },
        { name: '否', val: '02' }
      ],
      accountList: [
        {
          name: '测试',
          account: '0145797291120100078628',
          id: '100001',
          amount: 78300
        },
        {
          name: '江苏陆龙毛衫有限公司',
          account: '0145797291120100078628',
          id: '100001',
          amount: 159100
        }
      ]
    };
  },
  methods: {
    selectItem(item) {
      // console.log(item);
      this.checkItem = item;
      this.show = true;
      // const types = [{ name: '行内转账', value: '01' }, { name: '全国转账', value: '02' }];
      if (item === 'currency') {
        this.actions = this.currencyItems;
      } else if (item === 'deadline') {
        this.actions = this.timeLimits;
      } else if (item === 'automatic') {
        this.actions = this.automaticItems;
      }
    },
    onSelect(item) {
      console.log(item);
      this.show = false;
      if (this.checkItem === 'currency') {
        this.form.currency = item.name;
      } else if (this.checkItem === 'deadline') {
        this.form.time = item.name;
        this.form.rate = item.rate;
      } else if (this.checkItem === 'automatic') {
        this.form.automatic = item.name;
      }
    },
    openModal() {
      console.log(1);
      this.showPayee = true;
    },
    checkPayee(payee) {
      this.showPayee = false;
      this.form.account = payee.account;
      this.form.balance = payee.amount;
    },
    onKeyboardShow() {
      console.log(this.amount);
      this.amount = '';
    },
    onKeyboardInput(value) {
      if (this.amount === '0.00') {
        this.amount = value;
      } else {
        this.amount = `${this.amount}${value}`;
      }
    },
    onDelete() {
      this.amount = this.amount.substr(0, this.amount.length - 1);
    },
    next() {
      console.log('next');
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      }
      return `${val}月`;
    },
    checkDate(val) {
      // console.log(val);
      const options = { year: 'numeric', month: 'long' };
      this.currentTime = val.toLocaleDateString('zh', options);
      this.$refs.item.toggle();
    },
    cancelDate() {
      this.$refs.item.toggle();
    },
    transferOut() {
      this.$router.push('/transferOut');
    },
  },
  mounted() {
    this.form.currency = this.currencyItems[0].name;
    this.form.time = this.timeLimits[0].name;
    this.form.rate = this.timeLimits[0].rate;
  }
};
</script>
<style lang="less">
  .time_deposit_page{
    height: 100vh;
    background-color: #EFEFEF;
    overflow-y: auto;
    .transferIn{
      text-align: left;
      .van-field__control{
        text-align: right;
      }
      .payment_account_box {
        margin-top: 0.5rem;
        .balance .van-cell__value {
          color: #223968;
        }
        .currency {
          background: rgba(#0173FF, 0.1);
          border-radius: 4px;
          color: #0173FF;
          font-size: 0.75rem;
          line-height: 1rem;
          padding: 0.188rem;
        }
      }
      .transfer_payee_box{
        padding-top: 1vh;
        .amount_box{
          font-size: 1.5rem;
          color: #223968;
          padding-top: 0.313rem;
        }
        .amount_input{
          width: 60%;
          text-align: left;
          display: inline-flex;
          padding-left: 0.5rem;
          border: none;
          font-size: 1.2rem;
          line-height: 1.2rem;
          .van-field__control{
            text-align: left;
          }
        }
      }
      .account_info {
        margin-top: 0.5rem;
      }
      .amount {
        text-align: center;
        .title {
          padding: 1rem;
        }
        .input_box{
          background-color: #fff;
          margin-left: 5%;
          width: 90%;
          height: 7rem;
          border-radius: 0.5rem;
          .input_account{
            font-size: 18PX;
            line-height: 80PX;
            height: 80PX;
            font-weight: bold;
            .van-cell__title{
              max-width: 0;
            }
            .van-field__label{
              text-align: center;
              /*flex: auto;*/
            }
          }
        }
      }
      .financial{
        margin-top: 1rem;
      }
      .next{
        padding: 1.5rem;
      }
      .info{}
      .tips_box{
        padding: 2rem 1rem 1rem;
        .tips{
          font-size: 18PX;
          color: orange;
        }
        .tips_detail{
          color: #555;
          font-size: 12PX;
          line-height: 22PX;
          p{
            margin: 0.3rem 0.5rem;
          }
        }
      }
      .van-cell__title{
        max-width: 40%;
        font-weight: bold;
      }
    }
    .transferOut{
      .dropdown_box{
        position: fixed;
        width: 100%;
      }
      .deposit_list{
        padding-top: 50PX;
        .deposit_item{
          min-height: 12rem;
          background-color: #FFF;
          margin-bottom: 0.5rem;
          padding: 1rem;
          .item_title{
            display: flex;
            height: 2rem;
            line-height: 2rem;
            .money{
              font-weight: bold;
            }
            .status{
              flex: 1;
              text-align: right;
              span {
                color: #bbb;
              }
            }
          }
        }
        .item_content{
          p{
            color: #777;
            line-height: 18PX;
          }
          label{
            color: #bbb;
          }
          .transfer{
            float: right;
            padding: 0 1rem;
          }
        }
      }
    }
    .van-field__label{
      width: 6.5rem;
    }
    .van-cell__value{
      /*text-align: left;*/
    }
  }
</style>
